<template>
  <div class="login-container">
    <div class="login-wrapper">
      <div class="login-card">
        <div class="login-header">
          <div class="logo">
            <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
              <rect width="48" height="48" rx="8" fill="#10B981"/>
              <path d="M14 24h20v6H14z" fill="white"/>
              <path d="M18 16h12v4H18z" fill="white"/>
            </svg>
          </div>
          <h1 class="login-title">商家登录</h1>
          <p class="login-subtitle">登录收银系统商户后台</p>
        </div>

        <form @submit.prevent="handleLogin" class="login-form">
          <div class="form-group">
            <label for="merchant" class="form-label">商户账号</label>
            <div class="input-wrapper">
              <svg class="input-icon" width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
                <path d="M2 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6zm2 0l6 4 6-4H4zm12 8V8l-6 4-6-4v6h12z"/>
              </svg>
              <input
                id="merchant"
                v-model="form.merchant"
                type="text"
                class="form-input"
                placeholder="请输入商户号/账号"
                required
              />
            </div>
          </div>

          <div class="form-group">
            <label for="password" class="form-label">密码</label>
            <div class="input-wrapper">
              <svg class="input-icon" width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
                <path d="M5 9V7C5 4.239 7.239 2 10 2s5 2.239 5 5v2h1a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1h1zm2 0h6V7a3 3 0 1 0-6 0v2z"/>
              </svg>
              <input
                id="password"
                v-model="form.password"
                :type="showPassword ? 'text' : 'password'"
                class="form-input"
                placeholder="请输入密码"
                required
              />
              <button type="button" class="password-toggle" @click="togglePassword">
                <svg v-if="showPassword" width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
                  <path d="M10 3C5 3 1.73 7.11 1 10c.73 2.89 4 7 9 7s8.27-4.11 9-7c-.73-2.89-4-7-9-7zm0 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10z"/>
                </svg>
                <svg v-else width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
                  <path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zM11.4 14.8L9.6 13l1.8-1.8-1.4-1.4L8.2 11.6 6.4 9.8l1.8-1.8-1.4-1.4L5 8.4 3.2 6.6l1.4-1.4L6.4 7l1.8-1.8 1.4 1.4L8.8 8.4l1.8 1.8 1.4-1.4L13.8 7l1.8 1.8-1.4 1.4L12.4 8.4l-1.8 1.8 1.4 1.4z"/>
                </svg>
              </button>
            </div>
          </div>

          <div class="form-options">
            <label class="checkbox-wrapper">
              <input v-model="form.remember" type="checkbox" class="checkbox" />
              <span class="checkbox-label">记住我</span>
            </label>
            <a href="#" class="forgot-password">忘记密码？</a>
          </div>

          <button type="submit" class="login-button" :disabled="loading">
            <svg v-if="loading" class="loading-spinner" width="20" height="20" viewBox="0 0 20 20">
              <path d="M10 2v4M10 14v4M18 10h-4M6 10H2M15.314 4.686l-2.828 2.828M7.514 12.486l-2.828 2.828M15.314 15.314l-2.828-2.828M7.514 7.514L4.686 4.686" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            </svg>
            <span v-if="!loading">登录</span>
            <span v-else>登录中...</span>
          </button>
        </form>
      </div>
    </div>

    <div class="background-decoration">
      <div class="decoration-circle circle-1"></div>
      <div class="decoration-circle circle-2"></div>
      <div class="decoration-circle circle-3"></div>
    </div>
  </div>
  </template>

<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const loading = ref(false)
const showPassword = ref(false)

const form = reactive({
  merchant: '',
  password: '',
  remember: true,
})

const togglePassword = () => {
  showPassword.value = !showPassword.value
}

const handleLogin = async () => {
  if (!form.merchant || !form.password) {
    alert('请输入商户账号和密码')
    return
  }

  loading.value = true
  try {
    // 这里替换为真实 API 调用
    await new Promise(resolve => setTimeout(resolve, 1000))

    // 登录态
    localStorage.setItem('merchant_token', 'mock-' + Math.random().toString(36).slice(2))
    if (form.remember) localStorage.setItem('merchant_last_login', form.merchant)

    router.push('/mall')
  } catch (e) {
    console.error(e)
    alert('登录失败，请稍后重试')
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.login-container {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
  padding: 20px;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.login-wrapper {
  width: 100%;
  max-width: 400px;
  max-height: calc(100vh - 40px);
  z-index: 10;
  overflow-y: auto;
}

.login-card {
  background: white;
  border-radius: 16px;
  padding: 40px 32px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
}

.login-header {
  text-align: center;
  margin-bottom: 32px;
}

.logo {
  display: inline-flex;
  margin-bottom: 16px;
}

.login-title {
  font-size: 28px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 8px 0;
}

.login-subtitle {
  color: #6b7280;
  font-size: 16px;
  margin: 0;
}

.form-group { margin-bottom: 24px; }
.form-label { display: block; font-size: 14px; font-weight: 600; color: #374151; margin-bottom: 8px; }
.input-wrapper { position: relative; }
.input-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #9ca3af; z-index: 1; }
.form-input { width: 100%; padding: 12px 16px 12px 44px; border: 2px solid #e5e7eb; border-radius: 8px; font-size: 16px; transition: all 0.2s; box-sizing: border-box; }
.form-input:focus { outline: none; border-color: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15); }

.password-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #9ca3af; cursor: pointer; padding: 4px; border-radius: 4px; transition: color 0.2s; }
.password-toggle:hover { color: #10b981; }

.form-options { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.checkbox-wrapper { display: flex; align-items: center; cursor: pointer; }
.checkbox { width: 16px; height: 16px; margin-right: 8px; accent-color: #10b981; }
.checkbox-label { font-size: 14px; color: #374151; }
.forgot-password { font-size: 14px; color: #10b981; text-decoration: none; font-weight: 500; }
.forgot-password:hover { text-decoration: underline; }

.login-button { width: 100%; background: #10b981; color: white; border: none; border-radius: 8px; padding: 12px 24px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; }
.login-button:hover:not(:disabled) { background: #0ea170; transform: translateY(-1px); box-shadow: 0 10px 20px rgba(16, 185, 129, 0.25); }
.login-button:disabled { opacity: 0.7; cursor: not-allowed; }
.loading-spinner { animation: spin 1s linear infinite; }

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.background-decoration { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; }
.decoration-circle { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.12); animation: float 6s ease-in-out infinite; }
.circle-1 { width: 220px; height: 220px; top: 8%; left: 8%; animation-delay: 0s; }
.circle-2 { width: 160px; height: 160px; top: 62%; right: 10%; animation-delay: 2s; }
.circle-3 { width: 110px; height: 110px; bottom: 18%; left: 22%; animation-delay: 4s; }

@keyframes float { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-18px) rotate(8deg); } }

@media (max-width: 480px) {
  .login-container { padding: 16px; }
  .login-wrapper { max-height: calc(100vh - 32px); }
  .login-card { padding: 24px 20px; border-radius: 12px; }
  .login-title { font-size: 24px; }
  .form-group { margin-bottom: 20px; }
}

@media (max-height: 700px) {
  .login-card { padding: 24px 32px; }
  .login-header { margin-bottom: 24px; }
  .form-group { margin-bottom: 16px; }
}
</style>


